import React from 'react';

// import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { HashRouter as Router, Route, Switch, Link } from 'react-router-dom';

import OneView from './pages/OneView/';
import TwoView from './pages/TwoView';
import ThreeView from './pages/ThreeView';
import FourView from './pages/FourView';
import FiveView from './pages/FiveView';



var styles ={
    "nav_wrap":{
        display:'flex',
        listStyleType:'none',
        margin:0,
        padding:0,
        marginBottom:20
    },
    "nav_each":{
       padding:'5px 10px',
       listStyleType:'none',
       backgroundColor:'lightskyblue',
       marginLeft:'10px'
    }
}


const AppRouter = () => (
    <Router>
        <div>
            <ul className="nav_wrap" style={styles.nav_wrap}>
                <li style={styles.nav_each}><Link to="/one">Grid</Link></li>
                <li style={styles.nav_each}><Link to="/two">List</Link></li>
                <li style={styles.nav_each}><Link to="/three">Table</Link></li>
                <li style={styles.nav_each}><Link to="/four">AutoSizer</Link></li>
                <li style={styles.nav_each}><Link to="/five">WindowScroller</Link></li>

            </ul>
            <Switch>
                <Route exact path="/one" component={OneView} />
                <Route path="/two" component={TwoView} />
                <Route path="/three" component={ThreeView} />
                <Route path="/four" component={FourView} />
                <Route path="/five" component={FiveView} />
            </Switch>
        </div>
    </Router>
);

export default AppRouter;